<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="/common/common.jsp" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>会员积分列表</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <!-- Bootstrap 3.3.4 -->
    <link href="${ctx}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- FontAwesome 4.3.0 -->
    <link href="${ctx}/static/plugins/datatables/css/matrix-style.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/static/dist/css/AdminLTE.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/static/plugins/datatables/css/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/static/css/basic.css" rel="stylesheet" type="text/css">
    <link href="${ctx}/static/plugins/validationEngine/css/validationEngine.jquery.css" rel="stylesheet" type="text/css">
    <style type="text/css">
		.right_btn{
			float: right;
		}
		.left_btn{
			float:left;
			padding:10px 0px 10px 20px
		}
		.form-group{
			display: inline-flex;
		}
		.s_table{
			width: 100%;
			padding: 20px 20px 20px 0px;
		}
		.s_table label{font-weight: normal;}
		.s_table tr{
			height: 50px;
			margin: 10px;
		}
		.form-control{
			width: 80%;
		}
		.right_btn{
			float: right;
			margin-right: 5%;
		}
		.label{font-weight: 500;}
		.s_table td{
			font-weight: normal;
			padding-right: 20px;
			max-width: 200px;
			text-align: right;
		}
		.isMarketing_td .isMarketing_td{
			text-align: left;
		}
		.div_hidden{display: none}
		.integal_table{
			width: 100%;
			padding: 20px 20px 20px 0px;
		}
		.integal_table td{
			max-width: 200px;
			height: 100px;
			text-align: center;
		}
		.integal_table td div{
			width: 250px;
			margin-left: auto;
			margin-right: auto;
			font-weight: bold;
		}
		.integal_div{
			height: 60px;
		    background-color: #eee;
		    border-radius: 4px;
		    padding: 5px;
		}
		.integal_price{
			color: red;
		}
		.integal_div div{
			margin:0px 0px 8px 0px; 
		}
    </style>
</head>
<body>
<div class="wrapper">
	<div class="widget-box">
		<div class="widget-title">
		   <h5>会员积分数据</h5>
		</div>
		<div class="widget-content nopadding">
			<table class="integal_table">
				<tr>
					<td >
						<div class="integal_div">
							<div >总积分</div>
							<div class="integal_price" id = "count_score">0</div>
						</div>
					</td>
					<td >
						<div class="integal_div">
							<div>可用积分</div>
							<div class="integal_price" id = "available_score">0</div>
						</div>
					</td>
					<td >
						<div class="integal_div">
							<div>待用积分</div>
							<div class="integal_price" id = "aside_score">0</div>
						</div>
					</td>
					<td >
						<div class="integal_div">
							<div>已提现积分</div>
							<div class="integal_price" id = "used_score">0</div>
						</div>
					</td>
				</tr>
			</table>
		</div>
		<form class="form-horizontal" id="memberIntegalForm">
			<div class="widget-content nopadding">
				<table class="s_table">
					<tr>
						<td colspan="6">
							<div class="left_btn">
					          <button type="button"  class="btn btn-primary" onClick="exportExcel()">导出当前数据</button>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<label for="member_id">会员ID：</label>
						</td>
						<td>
							<input type="text" class="form-control validate[required]" id="member_id" placeholder="会员ID" value="${memberId}">
						</td>
						<td> <label>来源：</label></td>
						<td> 
					 		<select class="form-control"  id="trans_code">
								<option value="">全部</option>
		                 		<c:choose>
								 	<c:when test="${data != null && data.size() > 0}">  
								 		<c:forEach var = "obj" items="${data}">
								 			  <option value="${obj.transCode}">${obj.source}</option>
										</c:forEach>
						 			</c:when>
								</c:choose>
	                 		</select>
		                </td>
						<td></td><td></td>
					</tr>
					<tr>
						<td>
							<label>时间：</label>
						</td>
						<td>
							<input type="text" class="form-control" readonly="readonly" name="startCreateTime" id="start_create_time" data-type="date_00" onClick="WdatePicker({el:'start_create_time',maxDate:'#F{$dp.$D(\'end_create_time\')}'})">
						</td>
						<td>
							<label>至</label>
						</td>
						<td>
							<input type="text" class="form-control" readonly="readonly" name="endCreateTime" id="end_create_time" data-type="date_00" onClick="WdatePicker({el:'end_create_time',minDate:'#F{$dp.$D(\'start_create_time\')}'})">
						</td>
						<td colspan="2">
							<div class="right_btn">
									<button type="button" id="btn_query" class="btn btn-primary" onClick="query()">查询</button>
							</div>
						</td>
					</tr>
				</table>
			</div>
	</form>
	</div>
	
	<div class="row">
		 <div class="col-xs-12">
		 	<div class="box">
		 		 <div class="box-header">
	                 <h3 class="box-title">会员积分列表</h3>
	             </div>
	             <!-- 列表 -->
	             <div class="box-body table-responsive">
	             	<table id="dataTables" class="table table-bordered table-hover">
	             	</table>
	             </div>
		 	</div>
		 </div>
	</div
</div>
<div class="div_hidden">
	<form action="${ctx}/api/memberintegral/memberExportExcel"  id="memberExport" method="post">
		<input type="hidden" name="memberId" value="" id="e_memberId"/>
		<input type="hidden" name="pageNum" value="" id="e_pageNum"/>
		<input type="hidden" name="pageSize" value="" id="e_pageSize"/>
		<input type="hidden" name="transCode" value="" id="e_transCode"/>
		<input type="hidden" name="createStartTime" value="" id="e_createStartTime"/>
		<input type="hidden" name="createEndTime" value="" id="e_createEndTime"/>
	</form>	
</div>
<!-- jQuery 2.1.4 -->
<script src="${ctx}/static/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!--Bootstrap v3.3.4-->
<script src="${ctx}/static/bootstrap/js/bootstrap.min.js"></script>
<!--bootstrap-datepicker-->
<script src="${ctx}/static/plugins/My97DatePicker/datePicker/WdatePicker.js"></script>
<!-- datatable -->
<script src="${ctx}/static/plugins/datatables/jquery.dataTables.js" type="text/javascript"></script>
<script src="${ctx}/static/plugins/datatables/dataTables.bootstrap.js" type="text/javascript"></script>
<script src="${ctx}/static/plugins/layer/layer.js"></script>
<script src="${ctx}/static/plugins/validationEngine/jquery.validationEngine-zh_CN.js"></script>
<script src="${ctx}/static/plugins/validationEngine/jquery.validationEngine.js"></script>
<script>
   var tb;
   $(function () {
		//列表初始化
		tb = $('#dataTables').dataTable({
				"bServerSide": true,
				"sPaginationType": "full_numbers",
				"bJQueryUI": true,
				"sDom": '<"">t<"F"ip>',
				"sAjaxSource": "${ctx}/api/memberintegral/listPage", //ajax调用接口
				"aoColumnDefs": [{sDefaultContent: '',aTargets: [ '_all' ]}],
	       		"aoColumns": [
				  	{ "sTitle" : "会员id","mData": "memberId" ,"class":"sClass"},
	                { "sTitle" : "会员名称","mData": "memberName","class":"sClass" },
	                { "sTitle" : "来源","mData": "source","class":"sClass" },
	                { "sTitle" : "订单号","mData": "orderNo","class":"sClass" },
	                { "sTitle" : "时间","mData": "createTime","class":"sClass" },
	                { "sTitle" : "积分","mData": "score","class":"sClass" },
	                { "sTitle" : "备注","mData": "remark","class":"sClass" }
	            ],
		        "oLanguage" : {
		           "sProcessing" : "数据加载中······",
		           "sLengthMenu" : "显示 _MENU_ 条记录",
		           "sZeroRecords" : "没有您要搜索的内容！",
		           "sEmptyTable" : "列表中无数据存在！",
		           "sInfo" : "当前显示 _START_ 到 _END_ 条数据，共 _TOTAL_ 条数据",
		           "sInfoEmpty" : "显示 0 到 0 条记录",
		           "sInfoFiltered" : "数据列表中共  _MAX_ 条记录",
		           "oPaginate" : {
		               "sFirst" : "首页",
		               "sPrevious" : "上一页",
		               "sNext" : "下一页",
		               "sLast" : "末页"
		           }
		        },
		        "fnServerData" : function ( sSource, aoData, fnCallback, oSettings ) {
					oSettings.jqXHR = $.ajax( {
						"dataType" 	: 'json',
						"type" 		: "post",
						"async"     : 'false',
						"url" 		: sSource,
						"data" 		: {
							'pageNum': (aoData[3].value/aoData[4].value)+1,
							'pageSize' :  aoData[4].value,
							'memberId' : $('#member_id').val(),
							'memberName' : $('#member_name').val(),
							'transCode' : $('#trans_code').val(),
							'createStartTime' : $('#start_create_time').val(),
							'createEndTime' : $('#end_create_time').val()
						}, 
						"success"	: fnCallback
					} );
				},
		  });
   });
   //导出excel
   function exportExcel(){
	   var flag = $("#memberIntegalForm").validationEngine("validate");
	   if(flag){
		   $('#memberExport').submit();
	   }
   }
   //条件查询重新加载数据
   function query() {
	   var flag = $("#memberIntegalForm").validationEngine("validate");
	   if(flag){
	 	   tb.fnDraw();
	 	   setScoreData();
	 	   $('#e_memberId').val($('#member_id').val());
	 	   $('#e_transCode').val($('#trans_code').val());
	 	   $('#e_createStartTime').val($('#start_create_time').val());
	 	   $('#e_createEndTime').val($('#end_create_time').val());
	   }
   };
   //获取总的积分信息
   function setScoreData(){
	   var memberId = $('#member_id').val();
	   var url = "${ctx}/api/memberintegral/getScoreByMemberId";;
	   $.post(url,{"memberId":memberId},function(data){
		   if(data != null && data.code == 200){
			   var score = data.score;
			   var enablescore = score.enablescore;//可用积分
			   var standbyscore = score.standbyscore;//待用积分
			   var drawcashScore = score.drawcashScore;//已提现积分
			   $('#available_score').html(enablescore);
			   $('#aside_score').html(standbyscore);
			   $('#used_score').html(drawcashScore);
			   var total = enablescore + standbyscore;
			   $('#count_score').html(parseFloat(total).toFixed(2));
		   }else{
			   $('#count_score').html(0);
			   $('#available_score').html(0);
			   $('#aside_score').html(0);
			   $('#used_score').html(0);
		   }
       })
   }
   
   $(function(){
	   var memberId = $('#member_id').val();
	   if(memberId.trim().length > 0){
		   query();
	   }
   })
</script>
</body>
</html>